<template>
  <div class="registry">
    <!-- 注册页面头部 -->
    <van-nav-bar left-arrow @click-left="onClickLeft" :border="false" />
    <!-- 注册页面版心 -->
    <div class="wrapper">
      <!-- 标题 -->
      <div class="title">注册壹点灵</div>
      <div class="tip">请放心注册和登录，壹点灵充分保护您的隐私</div>
      <!-- 电话号输入框 -->
      <div class="tel same">
        <p>
          <span class="country">中国</span><i class="triangle"></i
          ><input
            type="text"
            placeholder="请输入手机号"
            @blur="telBlur"
            @focus="telFocus"
            v-model="telvalue"
          />
        </p>
        <span class="telerr" :style="{ color: telcolor }">{{ telerr }}</span>
      </div>

      <!-- 密码输入框 -->
      <div class="pas same">
        <input
          type="password"
          placeholder="设置6-12位密码"
          @blur="passBlur"
          @focus="passFocus"
          @input="passInput"
          v-model="passvalue"
        />
        <span class="passerr" :style="{ color: passcolor }">{{ passerr }}</span>
      </div>
      <!-- 确认密码输入框 -->
      <div class="repas same">
        <input
          type="password"
          placeholder="请再输入一遍密码"
          @blur="repassBlur"
          @focus="repassFocus"
          v-model="repassvalue"
        />
        <span class="repasserr" :style="{ color: repasscolor }">{{
          repasserr
        }}</span>
      </div>
      <!-- 注册按钮 -->
      <div class="regis same">
        <input
          type="submit"
          name="submit"
          id=""
          value="注册"
          @click="registryClick"
        />
      </div>
      <!-- 同意协议 -->
      <div class="checked">
        <p>
          点击注册即代表您同意
          <b>《壹点灵用户使用协议》</b>、<b>《隐私协议》</b> 和<b
            >《注册协议》</b
          >
        </p>
      </div>
    </div>
  </div>
</template>
<script>
import { ref } from "vue";
import { useRouter } from "vue-router";
// import { getRegistryTel } from "../utils/api";
export default {
  setup() {
    let telvalue = ref("");
    let passvalue = ref("");
    let repassvalue = ref("");
    let telerr = ref("");
    let passerr = ref("");
    let repasserr = ref("");
    let telflag = true;
    let passflag = true;
    let repassflag = true;
    let telcolor = ref("");
    let passcolor = ref("");
    let repasscolor = ref("");
    const router = useRouter();
    const onClickLeft = () => {
      router.go(-1);
    };
    // 验证电话号
    const telFocus = () => {
      if (telvalue.value === "") {
        telerr.value = "";
      }
    };
    const telBlur = () => {
      // console.log(telvalue.value);
      let reg = /^1[3578][0-9]{9}$/;
      if (telvalue.value !== "") {
        if (reg.test(telvalue.value)) {
          // 跟后端数据库手机号做比对，判断是否注册过
          // console.log(telvalue.value);
          // getRegistryTel({ tel: telvalue.value }).then((res) => {
          //   console.log(res);
          //   if (res.data.status === 2) {
          //     // console.log(res);
          //     telerr.value = "√";
          //     telcolor.value = "green";
          //     telflag = true;
          //   } else {
          //     telerr.value = "此号码已注册，请更换其它手机号";
          //     telcolor.value = "green";
          //     telflag = false;
          //   }
          // });
          telcolor.value = "green";
          telerr.value = "√";
          telflag = true;
        } else {
          telcolor.value = "red";
          telerr.value = "手机号码格式有误";
          telflag = false;
        }
      } else {
        telerr.value = "手机号码不能为空";
        telcolor.value = "red";
        telflag = false;
      }
    };
    // 验证密码
    const passFocus = () => {
      if (passvalue.value === "") {
        passerr.value = "";
      }
    };
    const passInput = () => {
      let reg1 = /[0-9]+/g;
      let reg2 = /[a-z]+/g;
      let reg3 = /[A-Z]+/g;
      let reg4 = /[\W_]+/g;
      let num = 0;
      if (reg1.test(passvalue.value)) {
        num++;
      }
      if (reg2.test(passvalue.value)) {
        num++;
      }
      if (reg3.test(passvalue.value)) {
        num++;
      }
      if (reg4.test(passvalue.value)) {
        num++;
      }
      switch (num) {
        case 1:
          passerr.value = "弱";
          passcolor.value = "red";
          passflag = false;
          break;
        case 2:
          passerr.value = "中";
          passcolor.value = "orange";
          passflag = true;
          break;
        case 3:
        case 4:
          passerr.value = "强";
          passcolor.value = "green";
          passflag = true;
          break;
      }
    };
    const passBlur = () => {
      // console.log(passvalue.value.length);
      if (passvalue.value !== "") {
        if (passflag) {
          if (passvalue.value.length >= 6 && passvalue.value.length <= 12) {
            passerr.value = "√";
            passcolor.value = "green";
            passflag = true;
          } else {
            passerr.value = "密码长度有误";
            passcolor.value = "red";
            passflag = false;
          }
        }
      } else {
        passerr.value = "密码不能为空";
        passcolor.value = "red";
        passflag = false;
      }
    };
    // 确认密码验证
    const repassFocus = () => {
      if (repassvalue.value === "") {
        repasserr.value = "";
      }
    };
    const repassBlur = () => {
      if (repassvalue.value !== "") {
        if (repassvalue.value === passvalue.value) {
          repasserr.value = "√";
          repasscolor.value = "green";
          repassflag = true;
        } else {
          repasserr.value = "密码确认有误";
          repasscolor.value = "red";
          repassflag = false;
        }
      } else {
        repasserr.value = "确认密码不能为空";
        repasscolor.value = "red";
        repassflag = false;
      }
    };
    // 提交注册验证
    const registryClick = () => {
      if (telvalue.value === "") {
        telerr.value = "手机号码不能为空";
        telcolor.value = "red";
        telflag = false;
      }
      if (passvalue.value === "") {
        passerr.value = "密码不能为空";
        passcolor.value = "red";
        passflag = false;
      }
      if (repassvalue.value === "") {
        repasserr.value = "确认密码不能为空";
        repasscolor.value = "red";
        repassflag = false;
      }
      // getRegistryTel({
      //   tel: telvalue.value,
      //   password: passvalue.value,
      //   repass: repassvalue,
      // }).then((res) => {
      //   console.log(res);
      //   if (res.data.status === 2) {
      if (telflag && passflag && repassflag) {
        localStorage.setItem("tel", telvalue.value);
        localStorage.setItem("password", passvalue.value);
        // location.href = "http://localhost:8080/#/login";
        router.replace("/login");
      }
      //   }
      // });
    };
    return {
      onClickLeft,
      telFocus,
      telBlur,
      telvalue,
      telflag,
      telerr,
      telcolor,
      passFocus,
      passBlur,
      passInput,
      passvalue,
      passflag,
      passerr,
      passcolor,
      repassvalue,
      repassflag,
      repasserr,
      repasscolor,
      repassFocus,
      repassBlur,
      registryClick,
    };
  },
};
</script>
<style lang="less">
// 重置vant组件样式
:root {
  --van-nav-bar-icon-color: #1d1d1d;
  --van-nav-bar-arrow-size: 20px;
}
// 头部vant组件箭头样式
.van-icon-arrow-left {
  font-weight: bolder;
  width: 19px;
  height: 30px;
  margin-top: 21px;
}
// input的placeholder样式
input::-webkit-input-placeholder {
  color: #aaaaaa;
  font-weight: 540;
}

.registry {
  // 注册页面全局字体
  font-family: PingFang SC;
  // 版心
  .wrapper {
    margin: 0 34px;
    margin-top: 24px;
    .same {
      margin-bottom: 15px;
      width: 307px;
      height: 36px;
      background: #f6f6f6;
      border-radius: 5px;
      // 验证提示错误
      .telerr,
      .passerr,
      .repasserr {
        display: inline-block;
        margin-top: 2.5px;
        text-align: right;
        width: 100%;
      }
    }
    // 标题
    .title {
      font-size: 20px;
      font-weight: bold;
      color: #282828;
    }
    // 标题下面的提示
    .tip {
      margin-top: 10px;
      font-size: 10px;
      font-weight: 500;
      color: #c5c5c5;
    }
    // input共同样式
    input {
      outline: none;
      border: 0;
      background: #f6f6f6;
      display: inline-block;
      font-size: 14px;
      font-weight: 540;
    }
    // 电话
    .tel {
      margin-top: 20px;
      vertical-align: middle;
      .country {
        display: inline-block;
        margin: 8px 8px;
        font-size: 16px;
        font-weight: 600;
        color: #656565;
      }
      .triangle {
        display: inline-block;
        height: 0;
        width: 0px;
        border-top: 4.5px solid #626262;
        border-right: 4.5px solid transparent;
        border-left: 4.5px solid transparent;
        vertical-align: middle;
        margin-right: 16px;
      }
    }
    // 密码
    .pas,
    .repas,
    .regis {
      input {
        margin: 7px 7px;
        width: 95%;
        height: 20px;
        font-weight: 540;
      }
    }
    // 确认密码
    .regis {
      background: #3ca2f5;
      margin-top: 35px;
      input {
        background: #3ca2f5;
        color: #fff;
      }
    }
    // 同意协议
    .checked {
      vertical-align: middle;
      font-size: 12px;
      color: #c5c5c5;
      line-height: 16px;
      text-align: center;
      b {
        font-weight: 700;
        color: #5d5d5d;
        vertical-align: middle;
      }
    }
  }
}
</style>
